<template>
  <div class="relationship">
    <div id="myChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import chartData from '../utils/chartData.json'

export default {
  data() {
    return {
      graph: {
        nodes: [],
        links: [],
        categories: []
      },
      chartData
    }
  },
  mounted() {
    this.initData()
    this.initChart()
    console.log(this.graph)
  },
  methods: {
    recursion(arr) {
      arr.map((item) => {
        if (item.children) {
          return this.recursion(item.children)
        } else {
          return {
            id: item.id,
            name: item.name,
            symbolSize: item.symbolSize,
            x: item.x,
            y: item.y,
            value: item.value,
            category: item.id
          }
        }
      })
    },
    /**
     *
     * nodeSize: 圆点个数
     * center： 圆心位置{x：, y:}
     * radius: 圆半径
     * return 基于圆心的nodeSize个圆点坐标
     *
     */
    calcCircularLayout(nodeSize, center, radius) {
      var i
      var _i
      var _layouts = []
      for (i = _i = 0; _i < nodeSize; i = ++_i) {
        var x = center.x + radius * Math.sin((2 * Math.PI * i) / nodeSize)
        var y = center.y + radius * Math.cos((2 * Math.PI * i) / nodeSize)
        _layouts.push({ x: x, y: y })
      }
      return _layouts
    },
    initData() {
      const { chartData } = this
      const { nodes, categories, links } = this.graph
      const data = chartData.nodes
      const chartLength = data.length

      for (let i = 0; i < chartLength; i++) {
        const { id, name, value } = data[i]
        const category = parseInt(data[i].id)
        const tempNode = {
          id,
          name,
          symbolSize: 60,
          x: 0,
          y: 0,
          value,
          category
        }
        nodes.push(tempNode)
        categories.push({ name })

        if (data[i].children) {
          // 生成随机圆坐标
          const childCoordinate = this.calcCircularLayout(
            data[i].children.length,
            { x: 0, y: 0 },
            500
          )

          for (let j = 0; j < data[i].children.length; j++) {
            const { id, name, value } = data[i].children[j]
            const category = parseInt(data[i].children[j].id)
            const tempNode = {
              id,
              name,
              symbolSize: 40,
              x: childCoordinate[j].x,
              y: childCoordinate[j].y,
              value,
              category
            }
            const tempLink = {
              source: data[i].id,
              target: data[i].children[j].id
            }
            nodes.push(tempNode)
            categories.push({ name })
            links.push(tempLink)

            if (data[i].children[j].children) {
              // 生成随机圆坐标
              const grandChildCoordinate = this.calcCircularLayout(
                data[i].children[j].children.length,
                { x: childCoordinate[j].x, y: childCoordinate[j].y },
                100
              )

              // this.circulation(data[i].children[j], 10, grandChildCoordinate, nodes, '', links)

              for (let k = 0; k < data[i].children[j].children.length; k++) {
                const { id, name, value } = data[i].children[j].children[k]
                const category = parseInt(data[i].children[j].id)
                const tempNode = {
                  id,
                  name,
                  symbolSize: 10,
                  x: grandChildCoordinate[k].x,
                  y: grandChildCoordinate[k].y,
                  value,
                  category
                }
                const tempLink = {
                  source: data[i].children[j].id,
                  target: data[i].children[j].children[k].id
                }
                nodes.push(tempNode)
                links.push(tempLink)
              }
            }
          }
        }
      }
    },

    circulation(arr, symbolSize, coordinate, nodes, categories, links) {
      for (let k = 0; k < arr.children.length; k++) {
        const { id, name, value } = arr.children[k]
        const category = parseInt(arr.id)
        const tempNode = {
          id,
          name,
          symbolSize,
          x: coordinate[k].x,
          y: coordinate[k].y,
          value,
          category
        }
        const tempLink = {
          source: arr.id,
          target: arr.children[k].id
        }
        if (categories !== '') categories.push({ name })
        nodes.push(tempNode)
        links.push(tempLink)

        if (arr.children) {
          return this.circulation(
            arr.children,
            symbolSize / 2,
            coordinate[k],
            nodes,
            categories,
            links
          )
        }
      }
    },

    initChart() {
      var chartDom = document.getElementById('myChart')
      var myChart = echarts.init(chartDom)
      var option

      const { graph } = this
      graph.nodes.forEach((node) => {
        node.label = { show: node.symbolSize > 10 }
      })

      option = {
        tooltip: {},
        legend: [
          {
            data: graph.categories.map(function (a) {
              return a
            })
          }
        ],
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [
          {
            type: 'graph',
            layout: 'none',
            data: graph.nodes,
            links: graph.links,
            categories: graph.categories,
            roam: false,
            label: {
              // position: 'right',
              formatter: '{b}'
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3
            },
            emphasis: {
              focus: 'adjacency',
              lineStyle: {
                width: 10
              }
            }
          }
        ],
        dataZoom: [
          {
            disabled: true
          }
        ]
      }

      myChart.setOption(option)
    }
  }
}
</script>
<style scoped>
#myChart {
  width: 750px;
  height: 750px;
}
</style>
